<template>
	<div class="contents">
		<van-nav-bar
		  title="修改密码"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<div class="content">
			<van-row class="cancel">
				<van-col span="24">
					<span>  </span>
				</van-col>
			</van-row>
			<van-row class="logtit">
				<van-col span="22" offset="2">
					<p>  </p>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="24">
					<!-- <van-row type="flex" justify="center">
						<van-col span="20">
							<p class="usertit">账号</p>
							<input type="text" placeholder="请输入手机号" class="username">
						</van-col>
					</van-row>
					<van-row type="flex" justify="center">
						
						<van-col span="14">
							<p class="usertit">验证码</p>
							<input type="text" placeholder="请输入验证码" class="username">
						</van-col>
						<van-col span="6">
							<van-button type="warning" size="small" class="sendcode">发送验证码</van-button>
						</van-col>
					</van-row> -->
					<van-row type="flex" justify="center">
						<van-col span="20">
							<p class="passtit">旧密码</p>
							<input type="password" placeholder="请输入旧密码" class="password">
						</van-col>
					</van-row>
					<van-row type="flex" justify="center">
						<van-col span="20">
							<p class="passtit">新密码</p>
							<input type="password" placeholder="请输入新密码" class="password">
						</van-col>
					</van-row>
					<van-row type="flex" justify="center">
						<van-col span="20">
							<p class="passtit">确认密码</p>
							<input type="password" placeholder="确认密码" class="password">
						</van-col>
					</van-row>
				</van-col>
			</van-row>
<!-- 			<van-row class="othertitle">
				<van-col span="10" offset="2">
					<router-link to="/login">已注册?前往登录</router-link>
				</van-col>
			</van-row> -->
			<van-row type="flex" justify="center">
				<van-col span="20">
					<van-button type="primary" block class="loginbtn">确认</van-button>
				</van-col>
			</van-row>
<!-- 			<van-row>
				<van-col span="20" offset="2">
					<p class="custit">登录即表示同意优乐用户协议条款</p>
				</van-col>
			</van-row> -->
		</div>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
import { Row, Col, Cell, CellGroup, Button, NavBar } from 'vant'
Vue.use(Row).use(Col).use(Cell).use(CellGroup).use(Button).use(NavBar)
export default {
	data () {
		return {}
  },
	methods: {
		onClickLeft () {
			this.$router.go(-1)
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.content {
	padding: 0 .1rem;
}
.cancel {
	margin-top: .1rem;
}
.iconsize {
	font-size: .25rem;
}
.logtit {
	margin-top: .64rem;
	font-size: .18rem;
}
.username, .password {
	width: 100%;
	height: .4rem;
	line-height: .4rem;
	color: #ccc;
	text-align: center;
	background: #f5f5f5;
	border: none;
	outline: none;
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: #ccc;
	text-align: center;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #ccc;
	text-align: center;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #ccc;
	text-align: center;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #ccc;
	text-align: center;
}
.usertit, .passtit {
	height: .24rem;
	line-height: .24rem;
	font-size: .14rem;
	margin-top: .1rem;
}
.othertitle {
	margin: .1rem 0;
}
.forgetpass {		text-align: right;
}
.loginbtn {
	margin-top: .2rem;
	background: #fff;
	border: 1px solid #696f80!important;
}
.custit {
	height: .3rem;
	line-height: .3rem;
	text-align: center;
}
.sendcode {
	width: 100%;
	height: .4rem;
	margin-top: .34rem;
	background: #CCCCCC;
	color: #fff;
	border: none;
}
</style>
